<template>
  <el-dialog title="分配权限" :visible.sync="diaLogisShow">
    <!-- 权限是一颗树 -->
    <!-- 将数据绑定到组件上 -->
    <!-- check-strictly 如果为true 那表示父子勾选时  不互相关联 如果为false就互相关联 -->
    <!-- id作为唯一标识 -->
    <el-tree
      ref="tree"
      :data="allAuth"
      :props="{label:'name'}"
      :show-checkbox="true"
      :check-strictly="true"
      :default-checked-keys="defaultCheck"
      node-key="id"
    />
    <!-- 确定 取消 -->
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" size="small" @click="onSubmit">确定</el-button>
        <el-button size="small" @click="diaLogisShow=false">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getPermissionList } from '@/api/permission'
import { getRoleDetail, assignPerm } from '@/api/setting'
import { tranListToTreeData } from '@/utils'
export default {
  name: 'SetAuth',
  data() {
    return {
      diaLogisShow: false,
      allAuth: [], // 所有权限
      defaultCheck: [], // 选中的节点
      roleId: ''
    }
  },
  methods: {
    // 获取所有角色权限
    async getPermissionList() {
      const res = await getPermissionList()
      this.allAuth = tranListToTreeData(res, '0')
    },
    // 获取当前角色权限
    async  getRoleDetail(id) {
      this.roleId = id
      const res = await getRoleDetail(id)
      this.defaultCheck = res.permIds
    },
    // 点击提交事件
    async  onSubmit() {
      const permIds = this.$refs.form.getCheckedKeys()
      await assignPerm({
        id: this.roleId,
        permIds
      })
      this.$message.success('提交成功！')
      this.diaLogisShow = false
    }
  }

}
</script>

<style>

</style>
